<template>
	<view class="content font_family">
		<view class="back" :style="{top:menuButtonInfo}" @click="back">
			<image src="../../static/msg/back_icon.png" mode=""></image>
		</view>
		<map style="width: 100%;height: 800rpx;"></map>
		<view class="msg_box">
			<view class="wl_msg" v-if="wl_msg">
				<view class="title f_z_b f_j">
					<view class="left f_j">
						<image :src="wl_msg.logo" mode="aspectFill"></image>
						<view class="name">
							{{wl_msg.expName?wl_msg.expName:'未知'}}
						</view>
						<view class="wl_id">
							{{wl_msg.number}}
						</view>
					</view>
					<view class="right f_j">
						<view class="copy" @click="copy(wl_msg.number)">
							复制
						</view>
						<view class="call" @click="call(wl_msg.courierPhone)">
							打电话
						</view>
					</view>
				</view>
				<view class="wl_box" :style="{height:wl_height}">
					<wlcard :list='wl_msg.list' v-if="wl_msg.list.length>0"></wlcard>
					<u-empty v-else text='暂无物流信息' icon="/static/public/kong.png">
					</u-empty>
				</view>
				<view class="all f_zj" @click="see_all">
					<text>{{show_all?'收起':'点击查看更多物流详情'}}</text>
					<image v-if="!show_all" src="../../static/public/xl.png" mode=""></image>
				</view>
			</view>
			<!-- <view class="fh f_j">
				<image src="../../static/public/lb.png" mode=""></image>
				<view class="text">
					<text>你有</text>
					<text class="color">1个</text>
					<text>包裹已发货</text>
				</view>
				<view class="btn">
					查看发货商品
				</view>
			</view> -->
			<view class="like">
				<view class="title">
					猜你喜欢
				</view>
				<view class="list f_z_b f_w">
					<commodity type='2' v-for="(item,index) in likes" :key="index" :item='item'></commodity>
				</view>
				<u-empty v-if='likes.length==0' text='暂无数据' icon="/static/public/kong.png">
				</u-empty>
			</view>
		</view>

	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import { guessLike, getLogistics } from '@/api/page.js'
	export default {
		computed: {
			...mapState(['menuButtonInfo', 'dl_id'])
		},
		data() {
			return {
				wl_height: '200rpx',
				show_all: false,
				query_data: {
					dl: "",
					order_no: '',
					page: 1
				},
				wl_query: {
					order_no: ''
				},
				likes: [],
				more: 'loadmore',
				wl_msg: '',
			}
		},
		onLoad(e) {
			this.query_data.dl = this.dl_id
			this.query_data.order_no = e.id
			this.wl_query.order_no = e.id
			this.get_like()
			this.get_wl_msg()
		},
		onReachBottom() {
			if (this.more == 'loadmore') {
				this.get_like()
			}
		},
		methods: {
			see_all() {
				this.show_all = !this.show_all
				if (this.show_all) {
					this.wl_height = 'auto'
				} else {
					this.wl_height = '200rpx'
				}
			},
			get_like() {
				guessLike(this.query_data).then(res => {
					if (res.code == 1) {
						if (res.data.data.length > 0) {
							this.likes = [...this.likes, ...res.data.data]
							this.query_data.page += 1
							this.more = 'loadmore'
						} else {
							this.more = 'nomore'
						}
					}
				})
			},
			// 获取物流信息
			get_wl_msg() {
				getLogistics(this.wl_query).then(res => {
					if (res.code == 1) {
						this.wl_msg = res.data
						if (res.data.list.length == 0) {
							this.wl_height = 'auto'
							this.show_all = true
						}
					}
				})
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.back {
			position: fixed;
			left: 30rpx;
			z-index: 999999;

			image {
				width: 40rpx;
				height: 40rpx;

			}
		}

		.msg_box {
			padding: 30rpx;
			padding-top: 0rpx;

			.wl_msg {
				margin-top: -50rpx;
				position: relative;
				padding: 30rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.title {
					.left {
						image {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
						}

						.name {
							margin-left: 10rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
						}

						.wl_id {
							margin-left: 10rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
						}
					}

					.right {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;

						.copy {}

						.call {
							margin-left: 20rpx;
						}
					}
				}

				.wl_box {
					padding: 24rpx;
					padding-bottom: 0rpx;
					// height: 200rpx;
					overflow: hidden;
				}

				.all {
					background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 80%);
					// height: 100rpx;
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;

					image {
						margin-left: 15rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}

			.fh {
				margin-top: 30rpx;
				padding: 16rpx 30rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				image {
					width: 44rpx;
					height: 36rpx;
				}

				.text {
					margin-left: 15rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;

					.color {
						color: #F54D4D;
					}
				}

				.btn {
					margin-left: auto;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					padding: 16rpx 18rpx;
					border-radius: 33rpx 33rpx 33rpx 33rpx;
					border: 2rpx solid #999999;
				}
			}

			.like {
				margin-top: 30rpx;

				.title {
					text-align: center;
					font-weight: 400;
					font-size: 36rpx;
					color: #000000;
				}

				.list {
					margin-top: 30rpx;
				}
			}
		}
	}
</style>